<template>
  <div class="footer">
    <ul class="icons clearfix">
      <li
        v-for="(tab, index) in tabs"
        :class="{'active':ind == index}"
        :key="tab.id"
         @click="tabChange(tabs[index],index)"
      >
        <font-awesome-icon v-if="0 == index" icon="home" />
        <font-awesome-icon v-if="1 == index" icon="chart-bar" />
        <font-awesome-icon v-if="2 == index" icon="calendar" />
        <font-awesome-icon v-if="3 == index" icon="globe" />
      </li>
    </ul>
  </div>
</template>

<script>
import bus from '../assets/eventBus'
export default {
  name: 'FooterTab',
  data () {
    return {
      tabs: ['home', 'chart-bar', 'calendar', 'globe'],
      headers: ['汇讯通','行情', '财经日历', '专家平台'],
      ind: '0'
    }
  },
  methods: {
    tabChange: function (paths, index) {
      this.$router.push(paths)
      this.ind = index
      bus.$emit('setHeaderTxt', this.headers[index])
    }
  }
}
</script>

<style lang="scss">
  .footer{
    background: #FBF9FA;
    width: 100%;
    height:60px;
    line-height: 60px;
    z-index: 10;
    .icons{
      display: flex;
      border-top: 1px solid #ccc;
      li{
        flex: 1;
        font-size: 28px;
        text-align: center;
        &.active{
          color: #2588ff;
        }
      }
    }
  }
  
</style>
